<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
  	<!-- 引入 ECharts 文件 -->
    <script src="${path}/static/lib/jquery-1.11.3.js"></script>
    <script src="${path}/static/lib/echarts.js"></script>
    <script src="${path}/static/lib/util.js"></script>
    <script type="text/javascript">
    
    	$(function(){
    		
	        // 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('main'));
	        // 指定图表的配置项和数据
	        
	        $.ajax({
	        	url : "${path}/category/getCategoryProductCount.action",
	        	type : "POST",
	        	dataType : "json",
	        	success : function(jsonObj){
	        		if(jsonObj.code === util.SUCCESS){
	        			var data = jsonObj.data;
	        			// List<CategoryCount> list;
    	    			// x轴数据，存放分类的名字
    	    			var xArray = new Array();
    	    			// y轴数据，存放商品数量
    	    			var yArray = new Array();
						
    	    			//①、for循环遍历
//     	    			for(var i = 0; i < data.length; i++){
//     	    				xArray.push(data[i].name);
//     	    				yArray.push(data[i].count);
//     	    			}
    	    			
						//②、each遍历
    	    			$(data).each(function(){
							xArray.push(this.name);
							yArray.push(this.count);
    	    			});
						
    	    			var option = {
    	    		      		title: {
    	    		                text: '商品分类的数量'
    	    		            },
    	    		            tooltip: {},
    	    		            legend: {
    	    		                data:['数量']
    	    		            },
    	    		            xAxis: {
    	    		                data: xArray
    	    		            },
    	    		            yAxis: {},
    	    		            series: [{
    	    		                name: '数量',
    	    		                type: 'bar',
    	    		                data: yArray
    	    		            }]
    	    		        };
    	    		        // 使用刚指定的配置项和数据显示图表。
    	    		        myChart.setOption(option);
	        		}
	        	}
	        });
	        
    	});
    </script>
</body>
</html>